<template>
  <div class="botOpen" v-if="isShow">
    <div class="botOpenMain">
      <div class="arrowTop"></div>
      <div class="line"></div>
      <div class="botOpenList">
        <div class="search">
          <a-icon
            :style="{
              marginRight: '5px',
              marginLeft: '10px',
              fontSize: '16px',
            }"
            type="search"
          />
          <input type="text" placeholder="搜索你需要的机器人" />
        </div>
        <div>
          <div
            class="botListItem"
            v-for="item in botListItem"
            :key="item.botListId"
          >
            <div class="botNavName">
              <img :src="item.imgUrl" />
              <span class="botTypeactive">{{ item.name }}</span>
            </div>
            <span class="dot">
              <span class="dotmain"></span>
            </span>
            <div class="botNavList">
              <span> </span>
              <div v-for="botNav in item.botNavName" :key="botNav.botListId">
                <div class="subgroups">
                  <div class="title">
                    <img :src="botNav.imgUrl" />
                    <span> {{ botNav.name }} </span>
                  </div>
                  <div class="subgroupsMain">
                    <div v-for="sub in botNav.subG" :key="sub.botId">
                      <router-link
                        :to="{
                          path: 'botDetail',
                          query: { id: sub.botId },
                        }"
                      >
                        <span>
                          {{ sub.txt }}
                        </span>
                        <span> </span>
                      </router-link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
      ShowMenuList: ["/botDetail", "/newsList", "/newsDetail", "/hotBot"],
      botListItem: [
        {
          botListId: 100001,
          name: "Steam",
          imgUrl:
            "https://cdnhdblog.steamrobot.me/Fk_tYkxuQrkGo-NTjkKf-5HMsvgt?imageView2/2/w/150/h/150",
          botNavName: [
            {
              name: "礼物",
              imgUrl:
                "https://cdnhdblog.steamrobot.me/FmvqYdB4VIOVfsdwZDZNgIPmN2yN",
              subG: [
                { botId: 200001, txt: "Steam礼物机器人-淘宝版" },
                { botId: 200002, txt: "Steam礼物机器人-激活码版" },
              ],
            },
            {
              name: "饰品",
              imgUrl:
                "https://cdnhdblog.steamrobot.me/Fkbt9Ala8TxUatL1nBWcXRK3yt4i",
              subG: [
                { botId: 200003, txt: "Steam饰品机器人-淘宝版" },
                { botId: 200004, txt: "Steam扫货机器人" },
              ],
            },
          ],
        },
        {
          botListId: 100002,
          name: "其他游戏平台",
          imgUrl:
            "https://cdnhdblog.steamrobot.me/Fk_tYkxuQrkGo-NTjkKf-5HMsvgt?imageView2/2/w/150/h/150",
          botNavName: [
            {
              subG: [{ botId: 200005, txt: "Origin橘子机器人" }],
            },
            {
              subG: [{ botId: 200006, txt: "战网代充机器人" }],
            },
          ],
        },
      ],
    };
  },
  watch: {
    $route(to, from) {
      if (this.ShowMenuList.includes(to.path)) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "@co/common.less";
</style>